<div class="box">
	<div class="example1 out">
		<div class="in">两层元素</div>
	</div>
</div>
<br />
<div class="example2 box">伪元素</div>
<br />
<div class="example3 box">伪元素</div>

<style>
	.box {
		width: 200px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		margin-right: 20px;
	}

	.example1.out {
		padding: 4px;
		border-radius: 99px;
		background: linear-gradient(to right, red, blue);
	}

	.in {
		width: 100%;
		height: 100%;
		background: #fff;
		border-radius: 99px;
	}

	.example2 {
		border: 4px solid transparent;
		position: relative;
		border-radius: 99px;
		background-color: #fff;
		background-clip: padding-box;
	}

	.example2::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: -1;
		margin: -4px;
		border-radius: 99px;
		background: linear-gradient(to right, red, blue);
	}

	.example3 {
		border: 4px solid transparent;
		border-radius: 99px;
		background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #8f41e9, #578aef);
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
	}
</style>
